import { FC, useState } from 'react';
import { css } from '@emotion/css';

const Demo: FC = () => {
  const [flag, setFlag] = useState(false);

  return (
    <div>
      <h1>Emotion Demo</h1>
      <button
        className={css`
          padding: 10px 20px;
          background-color: #007bff;
          color: #fff;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          &:hover {
            background-color: #ff5400;
          }
          ${flag &&
          css`
            background-color: #0056b3;
          `}
        `}
        onClick={setFlag.bind(null, !flag)}
      >
        Click me
      </button>
    </div>
  );
};

export default Demo;
